<template>
  <el-dialog :visible.sync="visible" :close-on-click-modal="false" :title="$tt('label_reorg_container_stock')"
    custom-class="dialog_big">


    <el-form :label-width="$globalCss.formLabelWidth_default" label-position="right">

      <el-form-item :label="$tt('label_warehouse_location')">
        <base_location_select :value="locationId" class="w_fill" :checkArea="false"
          :attrs="{ clearable: true, multiple: true }" @changeItem="changeLocation" />
        <!-- <el-input v-model="locationCode" @input="inputRefresh" ></el-input> -->
      </el-form-item>
      <el-form-item :label="$tt('label_sku')">
        <div class="flex_row_center">
          <sku_selec_input v-model="skuIds" :clearable="true" :multiple="true" @input="inputRefresh" class="flex_cell">
          </sku_selec_input>
          <el-checkbox :value="skuInnerUnknown" v-if="TOB" class="mg_l1" :label="$t('label_includes_unknown_sku')" border @change="e => {
            skuInnerUnknown = e
            inputRefresh()
          }"></el-checkbox>
        </div>

      </el-form-item>

      <!-- <el-form-item :label="$tt('label_container')">
        <el-input v-model="containerCode" @input="inputRefresh"></el-input>
      </el-form-item> -->
      <el-form-item :label="$tt('label_box_code')">
        <el-input v-model="subContainerCode" @input="inputRefresh" :placeholder="$t('tip_please_input')"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <ex_super_table ref="MainTable" :model="tableModel" :url="tableUrl" :urlParams="tableParamsFun" :autoPage="false"
          :autoLoad="false" height="400" @selection-change="e => selection = e" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="selectFinish">{{ $tt('label_submit') }}</el-button>
    </span>

  </el-dialog>
</template>

<script>

export default {
  name: 'stockContainerQuery_wms',
  data() {
    return {
      visible: false,
      bizType: null,

      skuInnerUnknown: false,


      skuIds: [],
      locationId: "",
      locationCode: "",
      containerCode: "",
      subContainerCode: "",
      havingUsableQty: 'Y',
      selection: [],

      tableUrl: '/wms-api/stock/StockQueryRpc/summaryContainerStockQuery.json',//'/oms-api/stock/StockSkuQueryRpc/query.json',
      tableModel: [
        { type: 'selection', clickToggle: true, },
        { key: 'locationCode', label: 'label_warehouse_location', 'min-width': 100, },
        { key: 'subContainerCode', label: 'label_box_code', 'min-width': 100, if: () => this.TOB, },
        { key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 120, },
        { key: 'customerName', label: 'label_customer', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuBarcode', label: 'label_sku_code', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuName', label: 'label_sku_name', 'width': 100, 'show-overflow-tooltip': true, },
        {
          key: 'usableQty', label: 'label_stock_sku_count', 'width': 100, 'show-overflow-tooltip': true,
          // formatter: (r, c, v, i) => v
        },
        // { key: 'containerCode', label: 'label_container', 'width': 100, 'show-overflow-tooltip': true, },

      ],
    }
  },
  props: {


  },

  computed: {

    TOB() {
      return this.bizType == 'TOB'
    },

  },
  methods: {
    changeLocation(e) {
      if (!e) e = []
      this.locationId = e.map(it => it.id)
      this.locationCode = e.map(it => it.code)
      this.inputRefresh()


    },
    inputRefresh: _.debounce(function (item) {
      this.$refs.MainTable.loadData({})
    }, 1000),
    locationChange(e) {

    },
    tableParamsFun(loadParams) {
      const out = {}
      if (this.locationCode) out.locationCodes = this.locationCode
      if (this.containerCode) out.containerCode = this.containerCode
      if (this.subContainerCode) out.subContainerCode = this.subContainerCode
      if (this.skuInnerUnknown) out.skuIds = ["-1"]
      if (this.skuIds) {
        if (out.skuIds) {
          out.skuIds.push(...this.skuIds)
        } else {
          out.skuIds = this.skuIds
        }
      }
      if (this.isMatchOnlyBox) out.isMatchOnlyBox = this.isMatchOnlyBox
      out.havingUsableQty = this.havingUsableQty
      out.bizType = this.bizType
      return out
    },

    show(option) {
      this.bizType = option.bizType
      this.visible = true
      this.$nextTick(() => {
        this.$refs.MainTable.loadData({})
      })

    },
    hide() {
      this.visible = false
    },

    selectFinish() {
      let select = this.selection;
      if (select.length == 0) {
        return this.$message.error(this.$tt("tip_please_tick"))
      }
      this.$emit('afterSubmit', select)
      this.visible = false
    },
  }
}
</script>
